<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
			svg{
				border: solid 1px black;
			}
		</style>
	</head>
	<body>
		<!--jpg,png,bmp等图片格式属于位图，通过描述每一个像素点的颜色来
		表达一张图片，这种图片在进行放大时，会变得模糊（每一个像素点
		都变大了）-->
		<!--<img src="ff.jpg"/>-->
		
		<!--svg图片属于矢量图，通过描述图片的绘制方式来表达一张图片，所以
		在放大时，不会产生模糊效果。svg只适合于图片内容单一，轮廓清晰
		的图片，不适合用于照片或绘画图片-->
		<!--<img src="face.svg" />-->
		
		
		<!--svg标签，创建一个svg绘制区域，svg是xml元素，所以必须指定命名
		空间xmlns-->
		<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
			<!--矩形-->
			<rect x="50" y="50" rx="10" ry="10" width="200" height="100" style="stroke: black;stroke-width: 2;fill: red;"/>
			<!--园-->
			<circle cx="100" cy="100" r="50" stroke="blue" stroke-width="5" fill="white"/>
			
			<!--椭圆-->
			<ellipse cx="300" cy="300" rx="100" ry="50" stroke="blue" stroke-width="5" fill="white"/>
			<!--直线-->
			<!--line-->
			<!--折线-->
			<!--polyline-->
			<!--基本属性-->
			<!--fill 颜色   stroke 边框  stroke-width 边框宽度   transform  旋转-->
			<!--多边形-->
			<polygon points="100,100 159,281 5,169 195,169 41,281" stroke="black" stroke-width="3" fill="yellow"/>
			
			<circle cx="450" cy="50" r="5" fill="black"/>
			<circle id="ctrl" cx="450" cy="150" r="5" fill="black"/>
			<circle cx="350" cy="150" r="5" fill="black"/>
			
			<path id="cpath" d="M 450,50 Q 450,150 350,150" stroke="red" stroke-width="4" fill="none"/>
		</svg>
		
		
		<script>
			var cpx = 450;
			var cpy = 150;
			var cp = document.getElementById("ctrl");
			var cpath = document.getElementById("cpath");
			// 点击键盘上 上下左右键 试试，有惊喜哦
			document.body.onkeydown = function(e){
				//console.log(e.keyCode);
				switch (e.keyCode){
					case 38:
					//上					
						cp.setAttribute("cy",Number(cp.getAttribute("cy"))-2);
						cpy -= 2;
						break;
					case 40:
					//下
						cp.setAttribute("cy",Number(cp.getAttribute("cy"))+2);
						cpy += 2;
						break;
					case 37:
					//左
						cp.setAttribute("cx",Number(cp.getAttribute("cx"))-2);
						cpx -= 2;
						break;
					case 39:
					//右
						cp.setAttribute("cx",Number(cp.getAttribute("cx"))+2);
						cpx += 2;
						break;
					default:
						break;
				}
				cpath.setAttribute("d","M 450,50 Q "+cpx+","+cpy+" 350,150");
				
			}
		</script>
		
		
		
	</body>
</html>
